@import "../../common/base.less";
@import "../../common/normalize.less";

.allGame {
    width: 100%;
    height: 100%;
    .allGameMian {
        .px2rem(width,
        1200);
        position: relative;
        margin: 0 auto;
        .slideShow {
            width: 100%;
            .px2rem(height,
            400);

            img {
                width: 100%;
                height: 100%;
            }
        }
        .gameTitle {
            width: 100%;
            .px2rem(margin-top,
            30);
            .px2rem(height,
            40);

            a {
                float: left;
                .px2rem(font-size,
                24);
                color: #fff;
                .px2rem(margin-left,
                20);
                .px2rem(margin-right,
                20);
                .px2rem(line-height,
                35);
                cursor: pointer;
            }
            div:first-child {
                margin-left: 0;
            }
            .active {
                border-bottom: 4px solid #4e92ff;
            }
        }
        .allGameList {
            width: 100%;
            height: auto;
            overflow: hidden;
            .searchNoGame {
                .px2rem(width,
                1200);
                .px2rem(height,
                650);
                background: rgba(0, 0, 0, 0.2);
                .px2rem(margin-top,
                50);
                .px2rem(margin-bottom,
                50);
                float: left;
                position: relative;
                .noGame {
                    .px2rem(width,
                    360);
                    .px2rem(height,
                    240);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    .noGameImg {
                        .px2rem(width,
                        244);
                        .px2rem(height,
                        173);
                        background: url("../../../static/img/noGame.png");
                        background-size: cover;
                        margin: 0 auto;
                    }
                    p {
                        .px2rem(width,400);
                        color: #fff;
                        .px2rem(margin-top,
                        30);
                        .px2rem(font-size,24);
                    }
                }
            }



            .allGameMain {
                .px2rem(width,
                1300);
                height: auto;
                word-wrap: break-word;
                position: relative;
                .px2rem(left,
                -20);
                .gameItem {
                    .px2rem(width,
                    270);
                    .px2rem(height,
                    270);
                    float: left;
                    .px2rem(margin-top,
                    20);
                    .px2rem(margin-left,
                    20);
                    .px2rem(margin-right,
                    20);
                    .px2rem(margin-bottom,
                    15);
                }
                .gameItem .itemImg .gameInC:hover .gameIn{
                        background: url("../../../static/img/hover.png");
                        background-size: 100% 100%;
                    }
                .gameItem:hover .itemImg .gameCC:hover .gameC{
                    background: url("../../../static/img/dataF.png");
                    background-size: 100% 100%;
                }
                .itemImg {
                    width: 100%;
                    position: relative;
                    overflow: hidden;
                    .px2rem(height,
                    210);
                    img {
                        width: 100%;
                        .px2rem(height,
                        210);
                        transition: all 0.5s ease 0s;
                    }
                      img:hover{
                         
                            transform: scale(1.2);
                        }
                    .itemStart {
                        width: 100%;
                        .px2rem(height,
                        32);
                        position: absolute;
                        left: 0;
                        bottom: 0;

                        background: rgba(0, 0, 0, 0.5);
                        text-align: center;
                        .px2rem(line-height,
                        32);
                        color: #f6f6f6;
                        span,
                        a {
                            display: inline-block;
                            .px2rem(font-size,
                            16);
                            float: left;
                            color: #f6f6f6;
                        }
                        .gameIn {

                            .px2rem(width,
                            20);
                            .px2rem(height,
                            20);
                            .px2rem(margin-top,
                            6);
                            .px2rem(margin-left,
                            15);
                            .px2rem(margin-right,
                            10);
                            background: url("../../../static/img/icon_gameIn.png");
                            background-size: 100% 100%;
                        }
                        .gameC {
                            .px2rem(margin-left,
                            10);
                            .px2rem(width,
                            20);
                            .px2rem(height,
                            20);
                            .px2rem(margin-top,
                            6);
                            .px2rem(margin-left,
                            15);
                            .px2rem(margin-right,
                            10);
                            background: url("../../../static/img/icon_gameC.png");
                            background-size: 100% 100%;
                            .px2rem(margin-left,
                            60);
                        }
                    }
                }
                .itemName {
                    .px2rem(width,
                    270);
                    .px2rem(height,
                    55);
                    .px2rem(font-size,
                    18);
                    .px2rem(line-height,
                    55);
                    .px2rem(text-indent,
                    10);
                    color: #f6f6f6;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: left;
                    background: rgba(0, 0, 0, 0.2);
                }
            }
        }
        .allGamePage {
            width: 100%;
            .px2rem(height,40);
            margin: 0 auto;
           .px2rem(padding-top,200);
            .px2rem(padding-bottom,50);
            .px2rem(margin-bottom,50);
            #page {
                width: 100%;
                .px2rem(height,
                40);
                margin: 0 auto;
                position: relative;
                .pagination{
                    width: auto;
                    position: absolute;
                    left: 40%;
                    transform: translateX(-30%);
                 li {
                    .px2rem(width,
                    40); 
                    .px2rem(height,
                    40);

                    a {
                        .px2rem(width,
                        40);
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        .px2rem(font-size,
                        12);
                        .px2rem(margin-left,
                        7);
                        text-align: center;
                        padding: 0;
                        color: #fff;
                        .px2rem(border-radius,5);
                        background:rgba(0,0,0,0.35);
                        border: none;
                        float: left;

                    }
                    .active {
                        background: #4e92ff !important;
                        color: #fff;
                    }

                    .next {
                        .px2rem(height,
                        40);
                        .px2rem(width,
                        65);
                        .px2rem(border-radius,5);
                    }
                }
            }
                .allPage {
                    display: block;
                    float: left;
                        .px2rem(border-radius,5);
                    
                    .px2rem(margin-left,
                    10);
                    .px2rem(width,50);
                    .px2rem(height,20);
                    .px2rem(line-height,20);
                    .px2rem(margin-top,10);
                    overflow: hidden;

                    .px2rem(font-size,12);
                    color: #fff;
                    text-align: center;
                }


                    .jump{
                        display: block; 
                        float: left;
                        .px2rem(height,20);
                        .px2rem(line-height,20);
                        .px2rem(margin-right,10);
                        .px2rem(margin-left,10);
                        .px2rem(font-size,12);
                        position: relative;
                        .px2rem(top,10);
                        color: #fff;
                        
                        overflow: hidden;
                    }
                    label {
                        display: block;
                        float: left;
                       color: #fff;
                        .px2rem(margin-right,
                        8);
                        .px2rem(font-size,12);
                        .px2rem(height,20);
                        .px2rem(line-height,20);
                        .px2rem(margin-top,10);
                    }
                    .pageNum {
                        display: block;float: left;
                        .px2rem(width,
                        40);
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        .px2rem(font-size,12);
                        text-align: center;
                        .px2rem(border-radius,5);
                        
                        .px2rem(margin-right,
                        10);
                        padding: 0;
                        background: rgba(0,0,0,0.35);
                        border: none;
                        color: #fff;
                    }
                    
                    .btnPage {
                        background: #fff;
                        border: none;
                        display: block;
                        float:right;
                        .px2rem(height,
                        40);
                        .px2rem(line-height,
                        40);
                        background: rgba(0,0,0,0.35);
                        .px2rem(font-size,12);
                        .px2rem(border-radius,5);
                        text-align: center;
                        color: #fff;

                    }
                
            }
        }
    }
}